<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我用Tailwind CSS重构了个人博客 - 前端开发技术论坛</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #3b82f6;
            --primary-light: #eff6ff;
            --primary-dark: #2563eb;
            --secondary: #8b5cf6;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --dark: #1e293b;
            --light: #f8fafc;
            --gray: #64748b;
            --border: #e2e8f0;
            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f1f5f9;
            color: var(--dark);
            line-height: 1.6;
        }
        
        .navbar {
            background-color: white;
            box-shadow: var(--shadow);
            padding: 0.75rem 1.5rem;
        }
        
        .navbar-brand {
            font-weight: 700;
            color: var(--primary);
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .search-container {
            max-width: 500px;
            width: 100%;
        }
        
        .search-input {
            width: 100%;
            padding: 0.6rem 1rem 0.6rem 2.5rem;
            border-radius: 25px;
            border: 1px solid var(--border);
            background-color: var(--light);
            transition: all 0.3s ease;
        }
        
        .search-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px var(--primary-light);
        }
        
        .search-icon {
            position: absolute;
            left: 0.8rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray);
        }
        
        .nav-link {
            color: var(--dark);
            font-weight: 500;
            margin: 0 0.5rem;
            transition: color 0.2s;
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }
        
        .nav-link:hover, .nav-link.active {
            color: var(--primary);
        }
        
        /* 路径导航 */
        .breadcrumb {
            margin: 1.5rem 0;
            background-color: transparent;
            padding: 0;
            font-size: 0.9rem;
        }
        
        .breadcrumb-item a {
            color: var(--gray);
            text-decoration: none;
        }
        
        .breadcrumb-item a:hover {
            color: var(--primary);
            text-decoration: underline;
        }
        
        .breadcrumb-item.active {
            color: var(--dark);
        }
        
        /* 主内容区布局 */
        .main-content {
            display: flex;
            gap: 2rem;
        }
        
        .post-detail-section {
            flex: 1;
        }
        
        .sidebar {
            width: 300px;
            flex-shrink: 0;
        }
        
        /* 帖子详情样式 */
        .post-detail-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: var(--shadow);
            overflow: hidden;
            margin-bottom: 2rem;
        }
        
        .post-header {
            padding: 1.5rem;
            border-bottom: 1px solid var(--border);
        }
        
        .post-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 1rem;
            line-height: 1.4;
        }
        
        .post-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .post-author {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .author-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-info {
            display: flex;
            flex-direction: column;
        }
        
        .author-name {
            font-weight: 600;
            font-size: 1rem;
        }
        
        .author-role {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        .post-time {
            font-size: 0.9rem;
            color: var(--gray);
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }
        
        .post-content {
            padding: 1.5rem;
            line-height: 1.8;
            font-size: 1.05rem;
        }
        
        .post-content h2 {
            font-size: 1.5rem;
            margin: 1.5rem 0 1rem;
            font-weight: 600;
        }
        
        .post-content p {
            margin-bottom: 1rem;
        }
        
        .post-content ul, .post-content ol {
            margin-bottom: 1rem;
            padding-left: 1.5rem;
        }
        
        .post-content li {
            margin-bottom: 0.5rem;
        }
        
        .post-content img {
            max-width: 100%;
            border-radius: 8px;
            margin: 1.5rem 0;
            box-shadow: var(--shadow);
        }
        
        .post-gallery {
            display: flex;
            gap: 1rem;
            margin: 1.5rem 0;
        }
        
        .post-gallery img {
            width: 33.333%;
            margin: 0;
        }
        
        .post-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin: 1.5rem 0;
            padding-top: 1rem;
            border-top: 1px dashed var(--border);
        }
        
        .post-tag {
            background-color: var(--primary-light);
            color: var(--primary);
            padding: 0.3rem 1rem;
            border-radius: 20px;
            font-size: 0.85rem;
            text-decoration: none;
            transition: all 0.2s;
        }
        
        .post-tag:hover {
            background-color: var(--primary);
            color: white;
        }
        
        .post-actions {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            background-color: var(--light);
        }
        
        .action-buttons {
            display: flex;
            gap: 1.5rem;
        }
        
        .post-action {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--gray);
            background: none;
            border: none;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.2s;
            padding: 0.4rem 0.75rem;
            border-radius: 6px;
        }
        
        .post-action:hover {
            color: var(--primary);
            background-color: var(--primary-light);
        }
        
        .post-action.liked {
            color: var(--danger);
        }
        
        .post-action.bookmarked {
            color: var(--secondary);
        }
        
        .share-dropdown .dropdown-toggle {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--gray);
            background: none;
            border: none;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.2s;
            padding: 0.4rem 0.75rem;
            border-radius: 6px;
        }
        
        .share-dropdown .dropdown-toggle:hover {
            color: var(--primary);
            background-color: var(--primary-light);
        }
        
        .share-dropdown .dropdown-menu {
            min-width: 180px;
        }
        
        .share-option {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.5rem 1rem;
            color: var(--dark);
            text-decoration: none;
        }
        
        .share-option:hover {
            background-color: var(--light);
        }
        
        /* 评论区样式 */
        .comments-section {
            background-color: white;
            border-radius: 10px;
            box-shadow: var(--shadow);
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .comments-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border);
        }
        
        .comments-title {
            font-size: 1.3rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .comments-count {
            color: var(--primary);
        }
        
        .comments-sort {
            font-size: 0.9rem;
        }
        
        .comment-form {
            margin-bottom: 2rem;
        }
        
        .comment-form-inner {
            display: flex;
            gap: 1rem;
        }
        
        .comment-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .comment-input-container {
            flex: 1;
        }
        
        .comment-input {
            width: 100%;
            padding: 1rem;
            border-radius: 8px;
            border: 1px solid var(--border);
            resize: none;
            min-height: 120px;
            font-family: inherit;
            font-size: 1rem;
            transition: all 0.2s;
        }
        
        .comment-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px var(--primary-light);
        }
        
        .comment-form-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 0.75rem;
            gap: 1rem;
        }
        
        .comment-attach {
            background: none;
            border: none;
            color: var(--gray);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.4rem 0.75rem;
            border-radius: 6px;
            transition: all 0.2s;
        }
        
        .comment-attach:hover {
            color: var(--primary);
            background-color: var(--primary-light);
        }
        
        .comment-submit {
            background-color: var(--primary);
            border-color: var(--primary);
            color: white;
            padding: 0.5rem 1.5rem;
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }
        
        .comment-submit:hover {
            background-color: var(--primary-dark);
        }
        
        .comments-list {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        
        .comment-item {
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--border);
            position: relative;
        }
        
        .comment-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }
        
        .comment-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.75rem;
        }
        
        .comment-author {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .comment-author-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .comment-author-info {
            display: flex;
            flex-direction: column;
        }
        
        .comment-author-name {
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .comment-time {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        .comment-menu-btn {
            background: none;
            border: none;
            color: var(--gray);
            cursor: pointer;
            font-size: 1rem;
            opacity: 0.7;
            transition: all 0.2s;
        }
        
        .comment-menu-btn:hover {
            opacity: 1;
            color: var(--dark);
        }
        
        .comment-content {
            margin-bottom: 0.75rem;
            line-height: 1.7;
        }
        
        .comment-actions {
            display: flex;
            gap: 1.5rem;
            font-size: 0.9rem;
        }
        
        .comment-action {
            display: flex;
            align-items: center;
            gap: 0.3rem;
            color: var(--gray);
            background: none;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
        }
        
        .comment-action:hover {
            color: var(--primary);
            background-color: var(--primary-light);
        }
        
        .comment-action.liked {
            color: var(--danger);
        }
        
        /* 回复样式 */
        .replies-list {
            margin-top: 1rem;
            margin-left: 2rem;
            padding-left: 1.5rem;
            border-left: 2px solid var(--border);
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .reply-item {
            padding: 0.75rem 0;
        }
        
        .reply-form {
            margin-top: 1rem;
            display: flex;
            gap: 0.75rem;
        }
        
        .reply-input {
            flex: 1;
            padding: 0.75rem;
            border-radius: 6px;
            border: 1px solid var(--border);
            resize: none;
            min-height: 80px;
            font-family: inherit;
            font-size: 0.95rem;
        }
        
        .reply-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px var(--primary-light);
        }
        
        .reply-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            margin-top: 0.5rem;
        }
        
        .reply-cancel {
            background: none;
            border: 1px solid var(--border);
            color: var(--gray);
            padding: 0.35rem 1rem;
            border-radius: 6px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .reply-cancel:hover {
            border-color: var(--dark);
            color: var(--dark);
        }
        
        .reply-submit {
            background-color: var(--primary);
            border-color: var(--primary);
            color: white;
            padding: 0.35rem 1rem;
            border-radius: 6px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .reply-submit:hover {
            background-color: var(--primary-dark);
        }
        
        /* 侧边栏样式 */
        .sidebar-widget {
            background-color: white;
            border-radius: 10px;
            box-shadow: var(--shadow);
            padding: 1.25rem;
            margin-bottom: 1.5rem;
        }
        
        .widget-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--border);
        }
        
        .author-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 1rem 0;
        }
        
        .author-card-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 1rem;
            border: 3px solid var(--light);
            box-shadow: var(--shadow);
        }
        
        .author-card-name {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 0.25rem;
        }
        
        .author-card-role {
            color: var(--gray);
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }
        
        .author-card-bio {
            font-size: 0.9rem;
            color: var(--dark);
            margin-bottom: 1rem;
            line-height: 1.6;
        }
        
        .author-card-stats {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-bottom: 1rem;
        }
        
        .author-stat {
            text-align: center;
        }
        
        .author-stat-value {
            font-weight: 600;
            color: var(--primary);
        }
        
        .author-stat-label {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        .author-card-actions {
            display: flex;
            gap: 0.75rem;
            width: 100%;
        }
        
        .btn-follow {
            flex: 1;
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 0.5rem;
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.2s;
        }
        
        .btn-follow:hover {
            background-color: var(--primary-dark);
        }
        
        .btn-message {
            flex: 1;
            background-color: transparent;
            border: 1px solid var(--border);
            color: var(--dark);
            padding: 0.5rem;
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.2s;
        }
        
        .btn-message:hover {
            border-color: var(--primary);
            color: var(--primary);
        }
        
        .related-posts {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .related-post {
            display: flex;
            gap: 0.75rem;
        }
        
        .related-post-image {
            width: 80px;
            height: 80px;
            border-radius: 6px;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .related-post-content {
            flex: 1;
        }
        
        .related-post-title {
            font-weight: 500;
            font-size: 0.95rem;
            margin-bottom: 0.25rem;
            color: var(--dark);
            text-decoration: none;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .related-post-title:hover {
            color: var(--primary);
        }
        
        .related-post-meta {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        /* 分页样式 */
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 2rem;
            gap: 0.5rem;
        }
        
        .page-item {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: white;
            border: 1px solid var(--border);
            color: var(--dark);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.2s;
        }
        
        .page-item:hover {
            border-color: var(--primary);
            color: var(--primary);
        }
        
        .page-item.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .page-item.disabled {
            color: var(--gray);
            border-color: var(--border);
            cursor: not-allowed;
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .main-content {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
            }
            
            .navbar {
                padding: 0.75rem 1rem;
            }
            
            .search-container {
                max-width: 300px;
            }
            
            .post-gallery {
                flex-direction: column;
            }
            
            .post-gallery img {
                width: 100%;
                margin-bottom: 1rem;
            }
            
            .post-gallery img:last-child {
                margin-bottom: 0;
            }
        }
        
        @media (max-width: 768px) {
            .search-container {
                max-width: 100%;
                margin: 1rem 0;
            }
            
            .post-title {
                font-size: 1.5rem;
            }
            
            .post-actions {
                flex-direction: column;
                gap: 1rem;
            }
            
            .action-buttons {
                flex-wrap: wrap;
            }
            
            .comments-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }
            
            .comment-form-inner {
                flex-direction: column;
            }
            
            .replies-list {
                margin-left: 0;
                padding-left: 0.75rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="fas fa-comments"></i> 多元论坛
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
                <i class="fas fa-bars"></i>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarContent">
                <div class="d-flex justify-content-center flex-grow-1">
                    <div class="search-container position-relative">
                        <i class="fas fa-search search-icon"></i>
                        <input type="text" class="search-input" placeholder="搜索论坛、帖子或用户...">
                    </div>
                </div>
                
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-home"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#"><i class="fas fa-th-large"></i> 论坛</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-compass"></i> 发现</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-bell"></i> 通知</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="rounded-circle" style="width: 36px; height: 36px; object-fit: cover;">
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#"><i class="fas fa-user me-2"></i> 个人中心</a></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-bookmark me-2"></i> 我的收藏</a></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-cog me-2"></i> 设置</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt me-2"></i> 退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="container py-5">
        <!-- 路径导航 -->
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">首页</a></li>
                <li class="breadcrumb-item"><a href="#">前端开发技术论坛</a></li>
                <li class="breadcrumb-item active" aria-current="page">我用Tailwind CSS重构了个人博客，分享一些使用心得</li>
            </ol>
        </nav>
        
        <div class="main-content">
            <!-- 帖子详情区域 -->
            <div class="post-detail-section">
                <!-- 帖子详情卡片 -->
                <div class="post-detail-card">
                    <div class="post-header">
                        <h1 class="post-title">我用Tailwind CSS重构了个人博客，分享一些使用心得</h1>
                        <div class="post-meta">
                            <div class="post-author">
                                <img src="https://picsum.photos/100/100?random=2" alt="张前端的头像" class="author-avatar">
                                <div class="author-info">
                                    <span class="author-name">张前端</span>
                                    <span class="author-role">前端开发工程师 @某科技公司</span>
                                </div>
                            </div>
                            <span class="post-time">
                                <i class="far fa-clock"></i> 发布于 2小时前
                            </span>
                        </div>
                    </div>
                    
                    <div class="post-content">
                        <p>大家好，最近把我的个人博客用Tailwind CSS重构了一遍，从之前的传统CSS切换到原子化CSS方案，开发效率提升了不少。今天想和大家分享一下我的使用心得和一些最佳实践。</p>
                        
                        <h2>为什么选择Tailwind CSS？</h2>
                        <p>其实一开始我对原子化CSS是持怀疑态度的，觉得会让HTML变得臃肿不堪。但在尝试了几个小型项目后，我被它的开发效率所吸引，尤其是在博客这种UI组件相对固定但样式多变的场景。</p>
                        
                        <h2>使用感受与心得</h2>
                        <p>经过这次重构，我总结出几点使用感受：</p>
                        
                        <ol>
                            <li><strong>开发速度确实快</strong> - 不用再为命名烦恼，也不用在HTML和CSS文件之间来回切换</li>
                            <li><strong>响应式设计非常方便</strong> - 断点系统很直观，比如sm:, md:, lg:前缀一看就懂</li>
                            <li><strong>样式一致性好</strong> - 团队协作时能保持一致的设计语言</li>
                            <li><strong>配合@apply可以提取常用样式</strong> - 对于重复使用的样式组合，可以用@apply提取成组件类</li>
                            <li><strong>生产环境体积可控</strong> - 通过PurgeCSS可以大幅减小体积，我的博客最终CSS体积比之前还小了30%</li>
                        </ol>
                        
                        <p>下面是我的博客重构前后的对比：</p>
                        
                        <div class="post-gallery">
                            <img src="https://picsum.photos/600/400?random=20" alt="博客重构前的界面">
                            <img src="https://picsum.photos/600/400?random=21" alt="博客重构后的界面">
                            <img src="https://picsum.photos/600/400?random=22" alt="博客移动端适配效果">
                        </div>
                        
                        <h2>遇到的问题与解决方案</h2>
                        <p>当然，使用过程中也遇到了一些问题：</p>
                        
                        <ul>
                            <li><strong>HTML代码变长</strong> - 解决：合理使用组件化思想，将重复的UI片段封装成组件</li>
                            <li><strong>初期记忆成本高</strong> - 解决：使用一段时间后会形成肌肉记忆，配合官方文档查阅</li>
                            <li><strong>自定义主题配置</strong> - 解决：通过tailwind.config.js配置自定义颜色和字体，保持品牌一致性</li>
                        </ul>
                        
                        <p>总体来说，这次使用Tailwind CSS的体验非常好，尤其是对于需要快速迭代的项目。如果你还在犹豫是否尝试，我建议先从一个小型项目开始，相信你会和我一样爱上它！</p>
                        
                        <p>我的博客源码已经开源到GitHub，感兴趣的同学可以去看看具体实现。如果有任何问题，欢迎在评论区交流讨论！</p>
                        
                        <div class="post-tags">
                            <a href="#" class="post-tag">Tailwind CSS</a>
                            <a href="#" class="post-tag">前端开发</a>
                            <a href="#" class="post-tag">博客搭建</a>
                            <a href="#" class="post-tag">CSS</a>
                            <a href="#" class="post-tag">响应式设计</a>
                        </div>
                    </div>
                    
                    <div class="post-actions">
                        <div class="action-buttons">
                            <button class="post-action liked">
                                <i class="fas fa-thumbs-up"></i>
                                <span>245</span>
                            </button>
                            <button class="post-action">
                                <i class="far fa-comment"></i>
                                <span>42</span>
                            </button>
                            <button class="post-action">
                                <i class="far fa-bookmark"></i>
                                <span>收藏</span>
                            </button>
                        </div>
                        
                        <div class="share-dropdown dropdown">
                            <button class="dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                <i class="fas fa-share-alt"></i>
                                <span>分享</span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li><a href="#" class="share-option"><i class="fab fa-weixin"></i> 微信</a></li>
                                <li><a href="#" class="share-option"><i class="fab fa-weibo"></i> 微博</a></li>
                                <li><a href="#" class="share-option"><i class="fab fa-qq"></i> QQ</a></li>
                                <li><a href="#" class="share-option"><i class="fas fa-link"></i> 复制链接</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <!-- 评论区 -->
                <div class="comments-section">
                    <div class="comments-header">
                        <h3 class="comments-title">
                            <i class="far fa-comments"></i>
                            评论 (<span class="comments-count">42</span>)
                        </h3>
                        <div class="comments-sort">
                            <select class="form-select form-select-sm">
                                <option value="latest">最新评论</option>
                                <option value="popular">热门评论</option>
                            </select>
                        </div>
                    </div>
                    
                    <!-- 评论输入框 -->
                    <div class="comment-form">
                        <div class="comment-form-inner">
                            <img src="https://picsum.photos/100/100?random=1" alt="当前用户头像" class="comment-avatar">
                            <div class="comment-input-container">
                                <textarea class="comment-input" placeholder="分享你的想法..."></textarea>
                                <div class="comment-form-actions">
                                    <button class="comment-attach">
                                        <i class="far fa-image"></i>
                                        <span>添加图片</span>
                                    </button>
                                    <button class="comment-submit">
                                        <i class="fas fa-paper-plane"></i>
                                        <span>发表评论</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 评论列表 -->
                    <div class="comments-list">
                        <!-- 评论1 -->
                        <div class="comment-item">
                            <div class="comment-header">
                                <div class="comment-author">
                                    <img src="https://picsum.photos/100/100?random=10" alt="用户头像" class="comment-author-avatar">
                                    <div class="comment-author-info">
                                        <span class="comment-author-name">Web前端大神</span>
                                        <span class="comment-time">1小时前</span>
                                    </div>
                                </div>
                                <button class="comment-menu-btn">
                                    <i class="fas fa-ellipsis-h"></i>
                                </button>
                            </div>
                            <div class="comment-content">
                                <p>非常赞同你的观点！我也在几个项目中使用了Tailwind CSS，确实极大提高了开发效率。特别是在需要频繁调整样式的场景下，原子化CSS的优势非常明显。</p>
                                <p>关于你提到的HTML代码变长的问题，我推荐你试试Tailwind的@apply指令，配合组件化思想，可以很好地解决这个问题。</p>
                            </div>
                            <div class="comment-actions">
                                <button class="comment-action liked">
                                    <i class="fas fa-thumbs-up"></i>
                                    <span>36</span>
                                </button>
                                <button class="comment-action reply-btn">
                                    <i class="far fa-reply"></i>
                                    <span>回复</span>
                                </button>
                            </div>
                            
                            <!-- 回复列表 -->
                            <div class="replies-list">
                                <!-- 回复1 -->
                                <div class="reply-item">
                                    <div class="comment-header">
                                        <div class="comment-author">
                                            <img src="https://picsum.photos/100/100?random=2" alt="作者头像" class="comment-author-avatar">
                                            <div class="comment-author-info">
                                                <span class="comment-author-name">张前端</span>
                                                <span class="comment-time">45分钟前</span>
                                            </div>
                                        </div>
                                        <button class="comment-menu-btn">
                                            <i class="fas fa-ellipsis-h"></i>
                                        </button>
                                    </div>
                                    <div class="comment-content">
                                        <p>@Web前端大神 是的，@apply确实很好用！我在重构过程中大量使用了这个特性，把一些重复的样式组合提取出来，代码整洁了很多。</p>
                                    </div>
                                    <div class="comment-actions">
                                        <button class="comment-action liked">
                                            <i class="fas fa-thumbs-up"></i>
                                            <span>12</span>
                                        </button>
                                        <button class="comment-action reply-btn">
                                            <i class="far fa-reply"></i>
                                            <span>回复</span>
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- 回复输入框 -->
                                <div class="reply-form-container">
                                    <div class="reply-form">
                                        <img src="https://picsum.photos/100/100?random=1" alt="当前用户头像" class="comment-author-avatar">
                                        <textarea class="reply-input" placeholder="回复 @Web前端大神..."></textarea>
                                    </div>
                                    <div class="reply-actions">
                                        <button class="reply-cancel">取消</button>
                                        <button class="reply-submit">回复</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 评论2 -->
                        <div class="comment-item">
                            <div class="comment-header">
                                <div class="comment-author">
                                    <img src="https://picsum.photos/100/100?random=11" alt="用户头像" class="comment-author-avatar">
                                    <div class="comment-author-info">
                                        <span class="comment-author-name">CSS爱好者</span>
                                        <span class="comment-time">1.5小时前</span>
                                    </div>
                                </div>
                                <button class="comment-menu-btn">
                                    <i class="fas fa-ellipsis-h"></i>
                                </button>
                            </div>
                            <div class="comment-content">
                                <p>想问一下，你在使用Tailwind的时候，是如何处理自定义组件的样式的？比如一些比较复杂的UI组件，只用原子类会不会显得很乱？</p>
                            </div>
                            <div class="comment-actions">
                                <button class="comment-action">
                                    <i class="far fa-thumbs-up"></i>
                                    <span>8</span>
                                </button>
                                <button class="comment-action reply-btn">
                                    <i class="far fa-reply"></i>
                                    <span>回复</span>
                                </button>
                            </div>
                        </div>
                        
                        <!-- 评论3 -->
                        <div class="comment-item">
                            <div class="comment-header">
                                <div class="comment-author">
                                    <img src="https://picsum.photos/100/100?random=12" alt="用户头像" class="comment-author-avatar">
                                    <div class="comment-author-info">
                                        <span class="comment-author-name">Vue开发者</span>
                                        <span class="comment-time">2小时前</span>
                                    </div>
                                </div>
                                <button class="comment-menu-btn">
                                    <i class="fas fa-ellipsis-h"></i>
                                </button>
                            </div>
                            <div class="comment-content">
                                <p>我也在考虑把我的个人网站从SCSS迁移到Tailwind，请问你迁移过程中大概花了多长时间？有没有遇到什么特别棘手的问题？</p>
                            </div>
                            <div class="comment-actions">
                                <button class="comment-action">
                                    <i class="far fa-thumbs-up"></i>
                                    <span>15</span>
                                </button>
                                <button class="comment-action reply-btn">
                                    <i class="far fa-reply"></i>
                                    <span>回复</span>
                                </button>
                            </div>
                            
                            <!-- 回复列表 -->
                            <div class="replies-list">
                                <!-- 回复1 -->
                                <div class="reply-item">
                                    <div class="comment-header">
                                        <div class="comment-author">
                                            <img src="https://picsum.photos/100/100?random=2" alt="作者头像" class="comment-author-avatar">
                                            <div class="comment-author-info">
                                                <span class="comment-author-name">张前端</span>
                                                <span class="comment-time">1.5小时前</span>
                                            </div>
                                        </div>
                                        <button class="comment-menu-btn">
                                            <i class="fas fa-ellipsis-h"></i>
                                        </button>
                                    </div>
                                    <div class="comment-content">
                                        <p>@Vue开发者 我的博客规模不算大，大概花了两天时间完成迁移。主要的工作量是将原来的CSS类替换成Tailwind的原子类，以及调整一些布局细节。</p>
                                        <p>最棘手的问题是一些复杂的动画效果，需要结合@layer和@apply来实现，不过熟悉之后也还好。总体来说是值得的，现在修改样式方便多了！</p>
                                    </div>
                                    <div class="comment-actions">
                                        <button class="comment-action liked">
                                            <i class="fas fa-thumbs-up"></i>
                                            <span>7</span>
                                        </button>
                                        <button class="comment-action reply-btn">
                                            <i class="far fa-reply"></i>
                                            <span>回复</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 分页 -->
                    <div class="pagination">
                        <a href="#" class="page-item disabled">
                            <i class="fas fa-chevron-left"></i>
                        </a>
                        <a href="#" class="page-item active">1</a>
                        <a href="#" class="page-item">2</a>
                        <a href="#" class="page-item">3</a>
                        <a href="#" class="page-item">
                            <i class="fas fa-chevron-right"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- 侧边栏 -->
            <div class="sidebar">
                <!-- 作者信息卡片 -->
                <div class="sidebar-widget">
                    <div class="author-card">
                        <img src="https://picsum.photos/100/100?random=2" alt="张前端的头像" class="author-card-avatar">
                        <h3 class="author-card-name">张前端</h3>
                        <p class="author-card-role">前端开发工程师 @某科技公司</p>
                        <p class="author-card-bio">
                            热爱前端技术，专注于Vue和React开发，喜欢分享技术心得和踩坑经验。
                        </p>
                        <div class="author-card-stats">
                            <div class="author-stat">
                                <div class="author-stat-value">128</div>
                                <div class="author-stat-label">帖子</div>
                            </div>
                            <div class="author-stat">
                                <div class="author-stat-value">3.2k</div>
                                <div class="author-stat-label">粉丝</div>
                            </div>
                            <div class="author-stat">
                                <div class="author-stat-value">4.8k</div>
                                <div class="author-stat-label">获赞</div>
                            </div>
                        </div>
                        <div class="author-card-actions">
                            <button class="btn-follow">
                                <i class="fas fa-user-plus"></i> 关注
                            </button>
                            <button class="btn-message">
                                <i class="far fa-comment"></i> 私信
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 相关帖子 -->
                <div class="sidebar-widget">
                    <h3 class="widget-title">相关帖子</h3>
                    <div class="related-posts">
                        <div class="related-post">
                            <img src="https://picsum.photos/200/200?random=40" alt="相关帖子缩略图" class="related-post-image">
                            <div class="related-post-content">
                                <a href="#" class="related-post-title">从SCSS迁移到Tailwind CSS的完整指南</a>
                                <div class="related-post-meta">
                                    <i class="far fa-clock"></i> 3天前 · 238 浏览
                                </div>
                            </div>
                        </div>
                        <div class="related-post">
                            <img src="https://picsum.photos/200/200?random=41" alt="相关帖子缩略图" class="related-post-image">
                            <div class="related-post-content">
                                <a href="#" class="related-post-title">10个提高Tailwind CSS开发效率的技巧</a>
                                <div class="related-post-meta">
                                    <i class="far fa-clock"></i> 1周前 · 562 浏览
                                </div>
                            </div>
                        </div>
                        <div class="related-post">
                            <img src="https://picsum.photos/200/200?random=42" alt="相关帖子缩略图" class="related-post-image">
                            <div class="related-post-content">
                                <a href="#" class="related-post-title">Tailwind CSS vs 传统CSS：性能对比分析</a>
                                <div class="related-post-meta">
                                    <i class="far fa-clock"></i> 2周前 · 894 浏览
                                </div>
                            </div>
                        </div>
                        <div class="related-post">
                            <img src="https://picsum.photos/200/200?random=43" alt="相关帖子缩略图" class="related-post-image">
                            <div class="related-post-content">
                                <a href="#" class="related-post-title">使用Tailwind CSS构建响应式导航栏的5种方法</a>
                                <div class="related-post-meta">
                                    <i class="far fa-clock"></i> 3周前 · 456 浏览
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 热门标签 -->
                <div class="sidebar-widget">
                    <h3 class="widget-title">热门标签</h3>
                    <div class="post-tags">
                        <a href="#" class="post-tag">JavaScript</a>
                        <a href="#" class="post-tag">React</a>
                        <a href="#" class="post-tag">Vue</a>
                        <a href="#" class="post-tag">CSS3</a>
                        <a href="#" class="post-tag">HTML5</a>
                        <a href="#" class="post-tag">TypeScript</a>
                        <a href="#" class="post-tag">Webpack</a>
                        <a href="#" class="post-tag">性能优化</a>
                        <a href="#" class="post-tag">前端工程化</a>
                        <a href="#" class="post-tag">浏览器兼容</a>
                        <a href="#" class="post-tag">Node.js</a>
                        <a href="#" class="post-tag">PWA</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 帖子操作按钮交互
            const likeButtons = document.querySelectorAll('.post-action:has(.fa-thumbs-up)');
            likeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    this.classList.toggle('liked');
                    const icon = this.querySelector('i');
                    if (this.classList.contains('liked')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        // 更新点赞数
                        const countEl = this.querySelector('span');
                        let count = parseInt(countEl.textContent);
                        countEl.textContent = count + 1;
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        // 更新点赞数
                        const countEl = this.querySelector('span');
                        let count = parseInt(countEl.textContent);
                        countEl.textContent = count - 1;
                    }
                });
            });
            
            // 收藏按钮交互
            const bookmarkButtons = document.querySelectorAll('.post-action:has(.fa-bookmark)');
            bookmarkButtons.forEach(button => {
                button.addEventListener('click', function() {
                    this.classList.toggle('bookmarked');
                    const icon = this.querySelector('i');
                    const textSpan = this.querySelector('span');
                    
                    if (this.classList.contains('bookmarked')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        textSpan.textContent = '已收藏';
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        textSpan.textContent = '收藏';
                    }
                });
            });
            
            // 评论点赞交互
            const commentLikeButtons = document.querySelectorAll('.comment-action:has(.fa-thumbs-up)');
            commentLikeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    this.classList.toggle('liked');
                    const icon = this.querySelector('i');
                    if (this.classList.contains('liked')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        // 更新点赞数
                        const countEl = this.querySelector('span');
                        let count = parseInt(countEl.textContent);
                        countEl.textContent = count + 1;
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        // 更新点赞数
                        const countEl = this.querySelector('span');
                        let count = parseInt(countEl.textContent);
                        countEl.textContent = count - 1;
                    }
                });
            });
            
            // 回复按钮交互
            const replyButtons = document.querySelectorAll('.reply-btn');
            replyButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 找到最近的评论项
                    const commentItem = this.closest('.comment-item, .reply-item');
                    // 检查是否已有回复框
                    let replyFormContainer = commentItem.querySelector('.reply-form-container');
                    
                    if (replyFormContainer) {
                        // 如果已有回复框，则移除
                        replyFormContainer.remove();
                        return;
                    }
                    
                    // 获取被回复用户的名称
                    const authorName = commentItem.querySelector('.comment-author-name').textContent;
                    
                    // 创建回复框
                    replyFormContainer = document.createElement('div');
                    replyFormContainer.className = 'reply-form-container';
                    replyFormContainer.innerHTML = `
                        <div class="reply-form">
                            <img src="https://picsum.photos/100/100?random=1" alt="当前用户头像" class="comment-author-avatar">
                            <textarea class="reply-input" placeholder="回复 @${authorName}..."></textarea>
                        </div>
                        <div class="reply-actions">
                            <button class="reply-cancel">取消</button>
                            <button class="reply-submit">回复</button>
                        </div>
                    `;
                    
                    // 添加到回复列表中
                    let repliesList = commentItem.querySelector('.replies-list');
                    if (!repliesList) {
                        // 如果没有回复列表，则创建一个
                        repliesList = document.createElement('div');
                        repliesList.className = 'replies-list';
                        commentItem.appendChild(repliesList);
                    }
                    
                    repliesList.appendChild(replyFormContainer);
                    
                    // 为取消按钮添加事件
                    replyFormContainer.querySelector('.reply-cancel').addEventListener('click', function() {
                        replyFormContainer.remove();
                    });
                    
                    // 为回复按钮添加事件
                    replyFormContainer.querySelector('.reply-submit').addEventListener('click', function() {
                        // 这里可以添加提交回复的逻辑
                        alert('回复功能：这里将提交回复内容');
                        replyFormContainer.remove();
                    });
                });
            });
            
            // 分享链接功能
            const copyLinkBtn = document.querySelector('.share-option:has(.fa-link)');
            if (copyLinkBtn) {
                copyLinkBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    // 复制当前页面URL到剪贴板
                    navigator.clipboard.writeText(window.location.href)
                        .then(() => {
                            alert('链接已复制到剪贴板');
                        })
                        .catch(err => {
                            console.error('无法复制链接: ', err);
                        });
                });
            }
            
            // 发表评论功能
            const commentSubmitBtn = document.querySelector('.comment-submit');
            if (commentSubmitBtn) {
                commentSubmitBtn.addEventListener('click', function() {
                    const commentInput = document.querySelector('.comment-input');
                    const commentText = commentInput.value.trim();
                    
                    if (commentText) {
                        // 这里可以添加提交评论的逻辑
                        alert('评论功能：这里将提交评论内容');
                        commentInput.value = '';
                    } else {
                        alert('请输入评论内容');
                    }
                });
            }
        });
    </script>
</body>
</html>
    
